<template>
  <div class="followUser">
    <van-button
      v-if="isFollowed"
      class="follow-btn"
      round
      size="small"
      @click="onFollow"
      :loading="followLoading"
      >已关注</van-button
    >

    <van-button
      :loading="followLoading"
      @click="onFollow"
      v-else
      class="follow-btn"
      type="info"
      color="#3296fa"
      round
      size="small"
      icon="plus"
      >关注</van-button
    >
  </div>
</template>

<script>
import { addFollow, deleteFollow } from "@/api/user.js";
export default {
  name: "followUser",
  props: {
    isFollowed: {
      type: [Number, String, Boolean],
      required: true,
    },
    articleId:{
         type: [Number, String,Object],
      required: true,
    }
    
  },
  data() {
    return {
      followLoading: false, //控制加载状态;
    };
  },
  methods: {
    async onFollow() {
      // console.log(this.article);
      this.followLoading = true;
      try {
        if (this.isFollowed) {
          //已关注 需要取消关注
           await deleteFollow(this.articleId);
          // this.article.is_followed = false;
          //   console.log(data);
        } else {
          await addFollow(this.articleId);
          //    this.article.is_followed=true;
          //   console.log(data);
          //没关注 需要关注;
        }
        // props中的数据不能重新赋值;
        // this.isFollowed = !this.isFollowed;
        this.$emit("update-is_followed",!this.isFollowed)
        this.followLoading = false;
      } catch (err) {
        let message = "操作失败,请重试!";
        if (err.response && err.response.status == 400) {
            
          message = "用户不能关注自己";
        }
        console.log(err);
        this.followLoading = false;
        this.$toast(message);
      }
    },
  },
};
</script>

<style scoped lang="less">
.followUser {
  /deep/.follow-btn {
    width: 170px;
    height: 58px;
  }
}
</style>
